<!--图片上传 1.add 2.edit 都可用-->
<template>
    <div>
        <el-upload
                :action="uploadUrl"
                accept="image/jpeg,image/jpg,image/png"
                multiple
                :limit="imgNum"
                :class="{disabled:uploadDisabled}"
                class="disabled:none"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
                :on-remove="handleRemove"
                :file-list="imageList"
                list-type="picture">
            <!--<i class="el-icon-plus"></i>-->
            <el-button size="medium">
                <i class="el-icon-upload"></i>
                上传图片
            </el-button>
            <slot name="tip"></slot>
            <!--<div slot="twoTip" class="el-upload__tip">尺寸宽度不低于640，高度不限制，支持jpg、png文件，{{imgNum}}张上限</div>-->
        </el-upload>
    </div>
</template>

<script>
    const {origin} = window.location
    const baseURL = `${origin}/api/`
    export default {
        // props: {
        //     imageList: Array,
        //     clearList: Number,
        // },
        props: ['imageList', 'clearList', 'imgNum'],
        data() {
            return {
                uploadUrl: `${baseURL}upload_admin`,
                fileList: this.imageList ? this.imageList : [],
            };
        },
        watch: {
            imageList(value) {
                // console.log('父组件文件', this.imageList)

                this.fileList = value;
                // console.log('文件列表', typeof this.fileList)
            },
            clearList() {
                this.fileList = [];
            },
            fileList(value) {
                // console.log('文件列表', value)
                this.$emit('update:imageList', value);
            },

        },
        computed: {
            uploadDisabled() {
                return this.fileList.length > this.imgNum - 1
            },
        },
        methods: {
            handleRemove(file, fileList) {
                this.fileList = fileList
            },
            handleSuccess(response) {
                console.log('回应', response);
                const {data: {url}} = response
                this.fileList.push({url});
            },
            beforeUpload(file) {
                const imageSize = file.size / 1024 / 1024 < 1;
                if (!imageSize) {
                    this.$message.error('上传封面大小不能超过 1MB!');
                }
                return imageSize;
            }
        }
    };
</script>

<style scoped>

</style>

<style>
    .el-upload{
        display: flex;
    }

    .disabled .el-upload--picture-card {
        display: none;
    }

    .el-upload-list--picture-card .el-upload-list__item {
        height: auto
    }

    .el-upload-list {
        display: flex;
    }

    .el-upload-list--picture .el-upload-list__item {
        width: 140px;
        height: 140px;
        margin-right: 10px;
    }

    [data-v-3765ba62]{
        flex-direction:row !important;
        padding-left:10px;
        line-height:33px;
    }

    .el-upload-list--picture .el-upload-list__item-thumbnail {
        width: 120px;
        height: 120px;
        z-index: -1
    }
</style>
